<template>
  <view class="container">
    <!-- 查询和新增按钮 -->
    <view class="header">
      <uni-button v-if="isMainAccount" type="primary" size="mini" @click="openAddPopup">新增等级</uni-button>
      <uni-search-bar v-model="searchTerm" @confirm="filterLevels" @clear="filterLevels" placeholder="搜索会员" class="search-bar"></uni-search-bar>
      <uni-button type="default" size="mini" @click="fetchLevels">搜索</uni-button>
    </view>

    <!-- 等级列表 -->
    <view class="main-content">
      <uni-table :border="true">
        <uni-tr>
          <uni-th align="center">等级ID</uni-th>
          <uni-th align="center">等级名称</uni-th>
          <uni-th align="center">描述</uni-th>
		  <uni-th align="center">折扣比例</uni-th>
          <uni-th align="center">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="level in filteredLevels" :key="level.id">
          <uni-td align="center">{{ level.id }}</uni-td>
          <uni-td align="center">{{ level.name }}</uni-td>
          <uni-td align="center">{{ level.description }}</uni-td>
		  <uni-td align="center">{{ level.discount }}</uni-td>
          <uni-td align="center">
            <uni-button v-if="isMainAccount" type="default" size="mini" @click="openEditPopup(level)">编辑</uni-button>
            <uni-button v-if="isMainAccount" type="error" size="mini" @click="openDeletePopup(level)">删除</uni-button>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>

    <!-- 新增/编辑等级弹窗 -->
    <uni-popup ref="editPopup" type="center">
      <view class="popup-container">
        <h3>{{ currentLevel.id ? '编辑等级' : '新增等级' }}</h3>
        <view class="form-row">
          <label>等级名称：</label>
          <input v-model="currentLevel.name" placeholder="请输入等级名称" class="input-field"/>
        </view>
        <view class="form-row">
          <label>描述：</label>
          <input v-model="currentLevel.description" placeholder="输入描述" class="input-field"/>
        </view>
		<view class="form-row">
		  <label>折扣比例：</label>
		  <input v-model="currentLevel.discount" placeholder="输入折扣比例" class="input-field"/>
		</view>
        <view class="button-group">
          <uni-button type="primary" size="small" @click="saveLevel">保存</uni-button>
          <uni-button type="default" size="small" @click="closePopup">取消</uni-button>
        </view>
      </view>
    </uni-popup>

    <!-- 删除确认弹窗 -->
    <uni-popup ref="deletePopup" type="center">
      <view class="popup-container">
        <h3>确认删除</h3>
        <text>确定要删除 "{{ currentLevel.name }}" 吗？</text>
        <view class="button-group">
          <uni-button type="error" size="small" @click="confirmDelete">删除</uni-button>
          <uni-button type="default" size="small" @click="closePopup">取消</uni-button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      levels: [],
      filteredLevels: [],
      currentLevel: {},
      userInfo: {},
      isMainAccount: false
    };
  },
  methods: {
    async fetchLevels() {
	
      const res = await this.$myRuquest({
        url: '/index/plugin.users/getLevels',
        method: 'GET',
        data: {
          user_id: this.userInfo.user_id,
		  searchTerm: this.searchTerm,
        }
      });

      if (res.data.code === 200) {
        this.levels = res.data.data;
        this.isMainAccount = res.data.is_main_account;
        this.filterLevels(); // 初始化过滤
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000
        });
      }
    },
    filterLevels() {
      if (this.searchTerm) {
        this.filteredLevels = this.levels.filter(level => 
          level.name.includes(this.searchTerm) ||
          level.description.includes(this.searchTerm)
        );
      } else {
        this.filteredLevels = this.levels;
      }
    },
    openAddPopup() {
      this.currentLevel = { id: null, name: '', description: '', discount: ''  };
      this.$refs.editPopup.open();
    },
    openEditPopup(level) {
      this.currentLevel = { ...level };
      this.$refs.editPopup.open();
    },
    closePopup() {
      this.$refs.editPopup.close();
      this.$refs.deletePopup.close();
    },
    async saveLevel() {
      const res = await this.$myRuquest({
        url: '/index/plugin.users/saveLevel',
        method: 'POST',
        data: {
          ...this.currentLevel,
          user_id: this.userInfo.user_id
        }
      });

      if (res.data.code === 200) {
        uni.showToast({
          title: '操作成功',
          icon: 'success',
          duration: 2000
        });
        this.fetchLevels();
        this.closePopup();
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000
        });
      }
    },
    openDeletePopup(level) {
      this.currentLevel = { ...level };
      this.$refs.deletePopup.open();
    },
    async confirmDelete() {
      const res = await this.$myRuquest({
        url: '/index/plugin.users/deleteLevel',
        method: 'POST',
        data: {
          id: this.currentLevel.id,
          user_id: this.userInfo.user_id
        }
      });

      if (res.data.code === 200) {
        uni.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 2000
        });
        this.fetchLevels();
        this.closePopup();
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000
        });
      }
    },
    checkLoginStatus() {
      const token = uni.getStorageSync('token');

      if (token) {
        this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
      } else {
        this.userInfo = {};
        uni.redirectTo({
          url: '/pages/login/login'
        });
      }
    },
  },
  mounted() {
    this.checkLoginStatus();
    this.fetchLevels();
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #fff;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.search-bar {
  flex: 1;
  margin: 0 10px;
}

.main-content {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

label {
  width: 80px;
  color: #666;
  margin-right: 10px;
}

.input-field {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

.popup-container {
  width: 80%;
  max-width: 500px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>
